<template>
    <custom-page-box>
        <div class="need-manage-info-audit-container">
            <div class="head">
                <div class="title">
                    <h4>{{ contentInfo.personnelName }}</h4>
                    <img v-if="contentInfo.auditState === 0" src="~@/assets/images/icon/awiat-appore.png" alt="" />
                    <img v-if="contentInfo.auditState === 1" src="~@/assets/images/icon/daport-icon.png" alt="" />
                    <img v-if="contentInfo.auditState === 2" src="~@/assets/images/icon/reject-icon.png" alt="" />
                    <span
                        :class="{
                            await: contentInfo.auditState === 0,
                            success: contentInfo.auditState === 1,
                            reject: contentInfo.auditState === 2
                        }"
                    >{{
                        contentInfo.auditState === 0 ? '待审核' : contentInfo.auditState === 1 ? '通过' : '驳回'
                    }}</span>
                </div>
                <div class="btn" v-if="contentInfo.auditState === 0">
                    <a-button @click="handleAdopt"> 审核通过 </a-button>
                    <a-button @click="handleReject"> 审核驳回 </a-button>
                </div>
                <a-button
                    v-else
                    type="primary"
                    @click="
                        () => {
                            $router.go(-1)
                        }
                    "
                >
                    返回
                </a-button>
            </div>
            <div class="audit-info-content">
                <div class="left">
                    <houses-need v-if="formType === 'houses'" ref="needContent"></houses-need>
                    <plot-need v-if="formType === 'plot'" ref="needContent"></plot-need>
                    <product-need v-if="formType === 'product'" ref="needContent"></product-need>
                    <service-need v-if="formType === 'service'" ref="needContent"></service-need>
                    <talents-need v-if="formType === 'talents'" ref="needContent"></talents-need>
                </div>
                <div class="right">
                    <h4 class="mode-name">审核动态</h4>
                    <ul>
                        <li v-for="(item, index) in contentInfo.demandReviewList" :key="index">
                            <span>{{ item.createTime.substring(0, 10) }}</span>
                            <div>
                                <p>
                                    <span class="title">{{
                                        item.state === 1 || item.state === 2
                                            ? item.reviewer || item.companyName
                                            : item.companyName || item.reviewer
                                    }}</span>
                                    <span
                                        class="state"
                                        :class="{
                                            tijiao: item.state === 0,
                                            success: item.state === 1,
                                            reject: item.state === 2,
                                            await: item.state === 3
                                        }"
                                    >
                                        {{
                                            item.state === 0
                                                ? '提交审核'
                                                : item.state === 1
                                                    ? '审核通过'
                                                    : item.state === 2
                                                        ? ' 审核驳回'
                                                        : item.state === 3
                                                            ? '再次提交审核'
                                                            : ''
                                        }}
                                    </span>
                                </p>
                                <p class="time">
                                    <img src="~@/assets/images/icon/time-icon.png" alt="" />
                                    {{ item.createTime }}
                                </p>
                                <p class="explain">
                                    {{ item.message }}
                                    <a-button v-if="item.imgList" type="link" @click="showPicturesModal(item.imgList)">
                                        图片说明
                                    </a-button>
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <a-modal title="审批驳回" :visible="visible" @ok="handleOk" @cancel="handleModelCancel" class="reject-model">
            <a-form :form="form" layout="horizontal" :key="renderKey">
                <a-form-item label="驳回原因">
                    <a-textarea
                        placeholder="请输入驳回原因"
                        :maxLength="200"
                        auto-size
                        v-decorator="[
                            'auditContent',
                            {
                                rules: [
                                    {
                                        required: true,
                                        message: '请输入驳回原因(200字以内)'
                                    }
                                ]
                            }
                        ]"
                    />
                </a-form-item>
                <a-form-item extra="支持扩展名：.jpg,.jpeg,.png,大小不超过6M">
                    <a-upload
                        v-decorator="[
                            'upload',
                            {
                                getValueFromEvent: normFile
                            }
                        ]"
                        :action="$staticUrl"
                        list-type="picture"
                        :data="uploadData"
                        :before-upload="beforeUpload"
                        :remove="handleRemove"
                        @change="handleChange"
                    >
                        <a-button v-if="fileList.length < 9"> <a-icon type="upload" /> 上传文件 </a-button>
                    </a-upload>
                </a-form-item>
            </a-form>
        </a-modal>
    </custom-page-box>
</template>

<script>
import HousesNeed from '~/components/need-manage/houses'
import PlotNeed from '~/components/need-manage/plot'
import ProductNeed from '~/components/need-manage/product'
import ServiceNeed from '~/components/need-manage/service'
import TalentsNeed from '~/components/need-manage/talents'
import { getUUID } from '~/plugins/tools'

export default {
    name: 'NeedManageInfo',
    components: {
        HousesNeed,
        PlotNeed,
        ProductNeed,
        ServiceNeed,
        TalentsNeed
    },
    filters: {
        getFormName (type) {
            switch (type) {
            case 'houses':
                return '房屋需求'
            case 'plot':
                return '地块需求'
            case 'talents':
                return '人才需求'
            case 'product':
                return '农产品需求'
            case 'service':
                return '服务需求'
            }
        }
    },
    data () {
        return {
            contentInfo: {
                demandReviewList: []
            },
            previewVisible: false,
            previewImage: '',
            visible: false,
            form: this.$form.createForm(this, { name: 'coordinated' }),
            uploadData: {
                signature: '',
                'x-cos-security-token': '',
                'Content-Type': '',
                key: '',
                dir: '',
                host: ''
            },
            fileList: [],
            typeList: ['image/jpeg', 'image/png', 'image/bmp'],
            path: '/company-certification/img/',
            sourceList: [],
            renderKey: 0
        }
    },
    computed: {
        formType () {
            return this.$route.params.type || 'townService'
        }
    },
    created () {
        this.getInfo()
    },
    mounted () {},
    methods: {
        async getInfo () {
            const res = await this.$ApiServer['need/getInfo/audit']({
                id: this.$route.query.id
            })
            if (res.code === 200) {
                const { suppInformList, suppInform, pictureList, type } = res.data
                this.contentInfo = {
                    ...this.contentInfo,
                    ...res.data,
                    pictureList: pictureList || [],
                    enterScale: res.data.enterScale ? Number(res.data.enterScale) : undefined,
                    enterIncome: Number(res.data.enterIncome),
                    type: []
                }
                const list = suppInformList || suppInform
                switch (this.formType) {
                case 'houses':
                    this.contentInfo.supportingFacilityRemark = list ? list[0] || '' : ''
                    this.contentInfo.enterScaleRemark = list ? list[1] || '' : ''
                    this.contentInfo.type = type || ''
                    break
                case 'plot':
                    this.contentInfo.enterScaleRemark = list ? list[0] || '' : ''
                    this.contentInfo.type = type || ''
                    break
                case 'talents':
                    this.contentInfo.typeRemark = list ? list[0] || '' : ''
                    this.contentInfo.requirementsRemark = list ? list[1] || '' : ''
                    this.contentInfo.enterScaleRemark = list ? list[2] || '' : ''
                    this.contentInfo.type = Number(res.data.type)
                    break
                case 'product':
                    this.contentInfo.enterScaleRemark = list ? list[0] || '' : ''
                    this.contentInfo.type = type || ''
                    break
                case 'service':
                    this.contentInfo.enterScaleRemark = list ? list[0] || '' : ''
                    this.contentInfo.type = [type] || []
                    break
                }
                console.log(this.contentInfo)
                // this.$refs.needContent.form = this.contentInfo
                // if (this.formType === 'service') {
                //     this.$refs.needContent.getTree(
                //         Array.isArray(this.contentInfo.type)
                //             ? this.contentInfo.type[0] || ''
                //             : this.contentInfo.type
                //     )
                // }
            }
        },
        showPicturesModal (urls) {
            this.$picturesModal({ urls })
        },
        lookImg (imgurl) {
            this.previewImage = this.$staticUrl + '/' + imgurl
            this.previewVisible = true
        },
        handleCancel () {
            this.previewVisible = false
        },
        handleAdopt () {
            const that = this
            this.$confirm({
                content: '是否确认通过本次认证审核',
                async onOk () {
                    const res = await that.$ApiServer['need/pass/audit']({
                        idList: [that.$route.query.id]
                    })
                    if (res.code === 200) {
                        that.$message.success('操作成功')
                        that.$router.push('/need-manage/audit')
                    } else {
                        that.$message.error(res.message)
                    }
                },
                onCancel () {}
            })
        },
        handleReject () {
            this.visible = true
        },
        handleOk () {
            this.form.validateFields((err, values) => {
                let auditImgList = []
                if (this.sourceList.length) {
                    auditImgList = this.sourceList.map(item => item.url)
                }
                if (!err) {
                    this.$ApiServer['need/reject/audit']({
                        idList: [this.$route.query.id],
                        imgList: auditImgList,
                        message: values.auditContent
                    }).then((res) => {
                        if (res.code === 200) {
                            this.$message.success('操作成功')
                            this.visible = false
                            this.$router.push('/need-manage/audit')
                        } else {
                            this.$message.error(res.message)
                        }
                    })
                } else {
                    return false
                }
            })
        },
        handleModelCancel (e) {
            this.visible = false
            this.sourceList = []
            this.fileList = []
            this.form.resetFields()
            this.renderKey++
        },
        beforeUpload (file) {
            return new Promise((resolve, reject) => {
                if (!this.typeList.includes(file.type)) {
                    this.$message.error('上传图片格式不对!')
                    return false
                }
                const isLt6M = file.size / 1024 / 1024 < 6
                if (!isLt6M) {
                    this.$message.error('图片大小不能超过6M!')
                    return false
                }
                const _path = '/' + this.path + '/' + this.$service.dateFormatter('yyyy-MM-dd') + '/'
                this.$service
                    .getAuthor({ Method: 'POST', Pathname: '/' })
                    .then((info) => {
                        this.uploadData.signature = info.Authorization
                        this.uploadData['x-cos-security-token'] = info.XCosSecurityToken
                        this.uploadData['Content-Type'] = ''
                        this.uploadData.key = _path + getUUID() + '.' + file.name.replace(/,/g, '').split('.').pop()
                        this.uploadData.dir = this.path
                        this.uploadData.host = this.$staticUrl
                        resolve(true)
                    })
                    .catch((err) => {
                        return reject(new Error(err))
                    })
            })
        },
        handleChange ({ file, fileList }) {
            if (file.status === 'uploading') {
                return
            }
            if (file.status === 'done') {
                this.sourceList.push({
                    _id: file.uid,
                    url: this.uploadData.key
                })
                this.fileList = fileList
            }
        },
        handleRemove (file) {
            const index = this.sourceList.findIndex(item => item._id === file.uid)
            const num = this.fileList.findIndex(item => item.uid === file.uid)
            this.sourceList.splice(index, 1)
            this.fileList.splice(num, 1)
        },
        normFile (e) {
            if (Array.isArray(e)) {
                return e
            }
            return e && e.fileList
        }
    }
}
</script>

<style scoped lang="less">
.need-manage-info-audit-container {
    .head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #ffff;
        padding: 0 20px;
        height: 50px;
        border-radius: 6px;
        .title {
            display: flex;
            align-items: center;
            h4 {
                margin-bottom: 0;
                font-size: 16px;
                color: #333333;
                margin-right: 6px;
                font-weight: bold;
            }
            img {
                width: 17px;
                margin-right: 6px;
            }
            span {
                font-size: 16px;
                &.await {
                    color: #f3993c;
                }
                &.success {
                    color: @primary-color;
                }
                &.reject {
                    color: #fd5454;
                }
            }
        }
        .btn {
            button {
                color: #ffff;
                &.active,
                &:hover {
                    border: none;
                }
                &:nth-child(1) {
                    background-color: @primary-color;
                }
                &:nth-child(2) {
                    background-color: #fd5454;
                    margin-left: 20px;
                }
            }
        }
    }
    .audit-info-content {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        width: 100%;
        .mode-name {
            height: 52px;
            display: flex;
            align-items: center;
            font-size: 16px;
            color: #333333;
            position: relative;
            padding-left: 6px;
            border-bottom: 1px solid #f3f3f3;
            margin-bottom: 0;
            &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 2px;
                height: 12px;
                background: @primary-color;
            }
        }
        & > .left {
            width: 60%;
            background-color: #ffffff;
            padding-bottom: 60px;
            border-radius: 6px;
            overflow: hidden;
        }
        & > .right {
            width: calc(40% - 10px);
            padding-left: 30px;
            padding-bottom: 30px;
            background-color: #ffffff;
            border-radius: 6px;
            ul {
                margin-top: 30px;
                position: relative;
                &::before {
                    content: '';
                    position: absolute;
                    left: 100px;
                    top: 0;
                    width: 1px;
                    height: 100%;
                    background: #d4d4d4;
                }
                li {
                    display: flex;
                    & > span {
                        margin-right: 36px;
                    }
                    div {
                        width: calc(100% - 140px);
                        background: #f3f3f3;
                        border-radius: 4px;
                        padding: 10px;
                        position: relative;
                        flex-shrink: 0;
                        &::before {
                            content: '';
                            position: absolute;
                            top: 0;
                            left: -28px;
                            width: 16px;
                            height: 16px;
                            border: 3px solid @primary-color;
                            border-radius: 50%;
                            background: #ffffff;
                        }
                        p {
                            margin-bottom: 0;
                            .title {
                                color: #333333;
                                font-size: 14px;
                            }
                            .state {
                                border-radius: 4px;
                                height: 30px;
                                padding: 0 5px;
                                color: #ffffff;
                                &.tijiao {
                                    background-color: @primary-color;
                                }
                                &.success {
                                    background-color: @primary-color;
                                }
                                &.reject {
                                    background-color: #fd5454;
                                }
                                &.await {
                                    background-color: #f3993c;
                                }
                            }
                            &.time {
                                display: flex;
                                align-items: center;
                                margin-top: 10px;
                                font-size: 14px;
                                color: #999999;
                                img {
                                    width: 14px;
                                    height: 14px;
                                    margin-right: 8px;
                                }
                            }
                            &.explain {
                                color: #999999;
                                font-size: 14px;
                                margin-top: 10px;
                            }
                            button {
                                padding: 0;
                                height: inherit;
                                color: #fd5454;
                            }
                        }
                    }
                    & + li {
                        margin-top: 72px;
                    }
                }
            }
        }
    }
}

::v-deep {
    .form {
        padding: 0;
        h2 {
            border-bottom: 1px solid #f3f3f3;
            padding: 20px 28px 10px;
            position: relative;
            &:before {
                content: '';
                display: block;
                width: 2px;
                height: 12px;
                background-color: #009944;
                position: absolute;
                top: calc(50% + 5px);
                left: 20px;
                transform: translateY(-50%);
            }
        }
    }
    .next-btn {
        border-color: @primary-color;
        color: @primary-color;
    }
}
</style>
